<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <!-- 资金流水明细 -->
                <span>{{$t('common.capitalFlowDetail')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="innerOrderId" label="">
                            <el-input v-model="form.innerOrderId" :placeholder= "$t('common.innerOrderId')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="channelCompany" label="">
                            <el-select v-model="form.channelCompany" clearable :placeholder="$t('common.tradChannels')" style="width: 100%"><!--交易渠道-->
                                <el-option v-for="item in payWayList" :key="item.nameCode" :label="item.name" :value="item.nameCode + ''"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" >
                        <el-form-item prop="transactionMode" label="">
                            <el-select v-model="form.payChannel" clearable :placeholder="$t('common.transactionMode')" style="width: 100%"><!--交易方式-->
                              <el-option v-for="item in keyMap.payChannelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                <!--<el-option key="1" label="M Lhuillier" value="1"></el-option>
                                <el-option key="3" label="Palawan Pawnshop" value="3"></el-option>
                                <el-option key="4" label="ECPay" value="4"></el-option>
                                <el-option key="5" label="Bank" value="5"></el-option>
                                <el-option key="6" label="GCash" value="6"></el-option>
                                <el-option key="7" label="Coins" value="7"></el-option>
                                <el-option key="9" label="RD Pawnshop" value="9"></el-option>
                                <el-option key="10" label="Sevven_Corporation" value="10"></el-option>
                                <el-option key="100" label="BALANCE" value="100"></el-option>
                                <el-option key="102" label="Repay Coupon" value="102"></el-option>
                                <el-option key="99" label="Others" value="99"></el-option>-->
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                     <el-col :span="6">
                        <el-form-item prop="loanCmplTime" label=""><!--变动开始时间-结束时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.loanCmplTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.changeStartTime')"
                                    :end-placeholder="$t('common.changeEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="changeType" label="">
                            <el-select v-model="form.changeType" clearable :placeholder="$t('common.changeType')" style="width: 100%"><!--变动类型-->
                                <el-option key="1" :label="$t('common.payMoney')" value="1"></el-option>
                                <el-option key="0" :label="$t('common.collectMoney')" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="transType" label="">
                            <el-select v-model="form.tradeType" clearable :placeholder="$t('common.transType')" style="width: 100%"><!--交易类型-->
                                <el-option v-for="item in keyMap.tradeTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                <!--<el-option key="1" :label="$t('common.loan')" value="1"></el-option>
                                <el-option key="2" :label="$t('common.loanFee')" value="2"></el-option>
                                <el-option key="3" :label="$t('common.repayFee')" value="3"></el-option>
                                <el-option key="4" :label="$t('finance.lendingServiceFee')" value="4"></el-option>
                                <el-option key="5" :label="$t('finance.repaymentPrincipal')" value="5"></el-option>
                                <el-option key="6" :label="$t('finance.repaymentInterest')" value="6"></el-option>
                                <el-option key="7" :label="$t('finance.repaymentServiceFee')" value="7"></el-option>
                                <el-option key="8" :label="$t('finance.repaymentLateFee')" value="8"></el-option>
                                <el-option key="9" :label="$t('finance.repaymentPenaltyInterest')" value="9"></el-option>
                                <el-option key="10" :label="$t('finance.loanTax')" value="10"></el-option>
                                <el-option key="11" :label="$t('finance.repaymentTax')" value="11"></el-option>
                                <el-option key="12" :label="$t('finance.loanInterest')" value="12"></el-option>
                                <el-option key="13" :label="$t('finance.platformAdditionalIncome')" value="13"></el-option>
                                <el-option key="14" :label="$t('finance.ledger')" value="14"></el-option>
                                <el-option key="15" :label="$t('finance.offlineReturn')" value="15"></el-option>
                                <el-option key="16" :label="$t('finance.returnFee')" value="16"></el-option>
                                <el-option key="17" :label="$t('common.refund')" value="17"></el-option>
                                <el-option key="18" :label="$t('common.refundFee')" value="18"></el-option>
                                <el-option key="19" :label="$t('common.extensionAmount2')" value="19"></el-option>
                                <el-option key="20" :label="$t('common.extensionFee')" value="20"></el-option>
                                <el-option key="21" :label="$t('common.extensionTax')" value="21"></el-option>
                                <el-option key="22" :label="$t('operation.repaymentCoupon')" value="22"></el-option>-->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="6">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                            <el-button @click="checkBalanceHandler" type="primary">{{ $t('common.balanceInquiry') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                        <el-table-column :label="$t('common.innerOrderId')"  prop="orderId" min-width="150"></el-table-column><!--内部订单号-->
                        <el-table-column :label="$t('system.appName')"  prop="appName" min-width="150"></el-table-column><!--app名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column :label="$t('common.tradChannels')" width="100" >
                            <template slot-scope="{ row }">{{ row.channelCompany | SwitchChannelCompany }}</template>
                        </el-table-column><!--交易渠道-->
                        <el-table-column :label="$t('common.transactionMode')" prop="payChannel" width="200">

                            <template slot-scope="{ row }">{{ row.payChannel | SwitchLoanChannel }}</template><!--交易方式-->
                        </el-table-column><!--交易方式-->




                        <el-table-column :label="$t('common.changeTime')" prop="createTime" width="200">
                            <template slot-scope="{ row }">{{ row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请时间-->
                        </el-table-column><!--变动时间-->


                        <el-table-column :label="$t('common.changeMoney')" prop="tradeAmount" min-width="120"><!--变动金额-->
                            <template slot-scope="{ row }">{{ row.tradeAmount | formatCurrency }}</template><!--变动金额-->
                        </el-table-column>

                        <el-table-column :label="$t('common.changeType')" prop="changeType" width="180">
                         <template slot-scope="{ row }">{{ row.changeType | ChangeType }}</template><!--变动类型-->
                        </el-table-column><!--变动类型-->

                        <el-table-column :label="$t('common.transType')" prop="tradeType" width="200">
                            <template slot-scope="{ row }">{{ row.tradeType | TradeType }}</template><!--交易类型-->
                        </el-table-column><!--交易类型-->
                        <el-table-column prop="currentPeriod" v-if="domain=='Bene'" :label="$t('install.periodsNub')" min-width="150"></el-table-column><!--借款当前周期-->
                        <el-table-column prop="currentPeriod" v-if="showSpread" :label="$t('install.periodsNub')" min-width="150"></el-table-column><!--借款当前周期-->
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->

        <!--余额查询弹窗start-->
        <alert-dialog :title="$t('common.checkBalance')" :visible.sync="checkBalanceDialog.isVisible" width="450px" :dialogPosition="'center'" class="checkBalanceDialog">
            <div class="main">
                <div v-for="item in checkBalanceDialog.data" :key="item.name">{{item.name}}：{{ item.value | formatCurrency }}</div>
            </div>
            <div class="footer" slot="footer">
                <el-button @click="checkBalanceDialog.isVisible = false" type="primary">{{ $t('common.confirm') }}</el-button>
            </div>
        </alert-dialog>
        <!--余额查询弹窗end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';
    import {keyMap} from '@/config';
    import SelectAppList from '@/components/select-app-list';
    import {domain} from '@/config/'
    import SelectKanaList from '@/components/select-kana-list';

    export default {
        name: 'capital-flow-detail',
        components: {
            Pagination,
            AlertDialog,
            SelectAppList,
            SelectKanaList
        },
        mixins: [mixin],
        data() {
            return {
                domain:'',
                showSpread:false,
                form: {
                    orderId: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    payChannel: '',
                    changeType: '',
                    loanCmplTime: '',
                    tradeType: ''
                },
                rules: {
                    orderId: [],
                    loanCmplTime: []
                },
                overdueType: keyMap.overdueType,
                keyMap,
                formApplyCorrection: {
                    name: '',
                    orderId: '',
                    correctDay: '',
                    correctReason: this.$t('finance.errorOverdueCorrection')
                },
                dialogApplyCorrection: false,
                formLabelWidth: "130px",
                checkBalanceDialog: {
                    isVisible: false,
                    data: [],
                },
                payWayList: [],
            };
        },
        methods: {
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.finance.accountManagement.capitalFlowDetail(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                });
            },
            search() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.finance.accountManagement.platformExcel, ['page']);
                this.$openNewBlank(url);
            },
            balanceInquiry(){
                // console.log("331");
            },
            // 参数处理
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    channelCompany:'',
                    payChannel: '',
                    createTimeStart: '',
                    createTimeEnd: '',
                    changeType: '',
                    tradeType: '',

                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key] && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });

                params.orderId = form.innerOrderId;
                params.channelCompany = form.channelCompany;
                params.payChannel = form.payChannel;
                if (form.loanCmplTime) {
                    params.createTimeStart = form.loanCmplTime[0];
                    params.createTimeEnd = form.loanCmplTime[1];
                }
                params.changeType = form.changeType;
                params.tradeType = form.tradeType;

                return params;
            },

            applyCorrection(row) {
                this.dialogApplyCorrection = true;
                this.formApplyCorrection = Object.assign({
                    name: '',
                    orderId: '',
                    correctDay: '',
                    correctReason: this.$t('finance.errorOverdueCorrection')
                }, row);

            },
            submitApplyCorrection() {
                //如订单已经进行 金额减免操作（无论审核通过还是未通过都不可以操作天数冲正）
                if (parseInt(this.formApplyCorrection.correctDay) > parseInt(this.formApplyCorrection.lateDays)) {
                    this.$message.error(this.$t('finance.correctionCanNotMoreOverdueDay'));//冲正天数不可大于逾期天数
                } else {
                    let params = {
                        userId: this.formApplyCorrection.userId,
                        orderId: this.formApplyCorrection.orderId,
                        correctReason: this.formApplyCorrection.correctReason,
                        correctDay: this.formApplyCorrection.correctDay,
                    }
                    this.$api.finance.repay.addRepayCorrect(params).then(res => {
                        const {status, error} = res;
                        if ('1' === status && '00000000' === error) {
                            this.dialogApplyCorrection = false;
                            this.getTableData();
                        }
                    });
                }

            },
            checkBalanceHandler() {
                this.$api.finance.loan.queryBalance().then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.checkBalanceDialog.data = [];
                        Object.keys(data).forEach(key => {
                            let obj = {
                               'name': '',
                               'value': '',
                            };
                            obj.name = key;
                            obj.value = data[key];
                            this.checkBalanceDialog.data.push(obj)
                        });
                        this.checkBalanceDialog.isVisible = true;
                    }
                });
            },
            getChannelPayWay() {
                const params = {
                    type: 0
                };
                this.$api.finance.repay.getChannelPayWay(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.payWayList = data;
                    }
                });
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            this.tableMaxHeight = document.body.clientHeight - 270;
            this.showSpread = domain.showSpread();
            this.getTableData();
            this.getChannelPayWay();
        }
    }
</script>
<style lang="scss" scoped>
    .cursor-pointer {
        cursor: pointer;
    }
    .checkBalanceDialog {
            .main {
                text-align: center;
                font-size: 16px;
                padding:20px 0;
            }
            .footer {
                text-align: center;
            }
        }
</style>
